<template>
  <!-- 订单详情 -->
  <div>
    <div class="bg-[#fdc14b] flex justify-center items-center">
      <div class="flex justify-around items-center w-full">
        <div class="w-1/12 ml-[5%]">
          <img src="https://i.postimg.cc/T2cn3H1V/11-3x.png" alt="" class=""/>
        </div>
        <div class="w-1/2">
          <div class="text-white  2xl:text-[40px]">
            <div class="mt-6 -ml-[5%]">来探索美食，品尝甜蜜，探索新意</div>
          </div>
        </div>
        <div class="w-3/12 flex justify-center items-center">
          <div
            class="2xl:w-[152px] 2xl:h-[152px] sm:w-[76px] sm:h-[76px] rounded-full overflow-hidden"
          >
          <img src="https://i.postimg.cc/d1dDW4F9/24.png" alt="" width="w-full">
        </div>
          <div class="2xl:ml-[60px] sm:ml-[60px]">
            <span class="2xl:text-[40px] text-white">{{user.username}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    let user = reactive({
      img: 'https://i.postimg.cc/d1dDW4F9/24.png',
      username:'坤哥'
    })
    
    return {
    user
  }
  }
  
}
</script>
